<template>
  <div class="image-banner-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="显示模式">
        <el-radio-group v-model="data.displayMode">
          <el-radio label="single">单图模式</el-radio>
          <el-radio label="swiper">轮播模式</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="data.displayMode === 'single'">
        <el-form-item label="图片间距">
          <el-slider
            v-model="data.pageMargin"
            :min="0"
            :max="30"
            show-input
            input-size="small"
          />
        </el-form-item>
      </template>

      <template v-if="data.displayMode === 'swiper'">
        <el-form-item label="轮播高度">
          <el-slider
            v-model="data.height"
            :min="100"
            :max="300"
            show-input
            input-size="small"
          />
        </el-form-item>

        <el-form-item label="自动播放">
          <el-switch v-model="data.autoplay" />
        </el-form-item>

        <el-form-item label="播放间隔">
          <el-input-number
            v-model="data.interval"
            :min="1000"
            :max="10000"
            :step="100"
            size="small"
          />
          <span class="unit">毫秒</span>
        </el-form-item>

        <el-form-item label="每页显示">
          <el-input-number
            v-model="data.slidesPerView"
            :min="1"
            :max="5"
            size="small"
          />
          <span class="unit">张</span>
        </el-form-item>

        <el-form-item label="图片间距">
          <el-slider
            v-model="data.imageSpacing"
            :min="0"
            :max="20"
            show-input
            input-size="small"
          />
        </el-form-item>

        <el-form-item label="居中显示">
          <el-switch v-model="data.centeredSlides" />
        </el-form-item>

        <el-form-item label="显示分页器">
          <el-switch v-model="data.showPagination" />
        </el-form-item>
      </template>

      <el-divider>图片设置</el-divider>

      <el-form-item label="图片管理" class="image-management">
        <div class="image-list">
          <!-- 图片项容器 -->
          <div
            v-for="(image, index) in data.images"
            :key="index"
            class="image-item"
          >
            <!-- 第一行：预览图和操作按钮 -->
            <div class="image-row">
              <div class="image-preview">
                <img
                  :src="image.url || defaultImage"
                  :alt="image.title || '图片'"
                  class="preview-img"
                >
                <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  size="small"
                  @click="removeImage(index)"
                  class="delete-btn-top-right"
                />
              </div>
              
              <div class="image-operations">
                <el-button
                  type="primary"
                  icon="Picture"
                  @click="openImagePicker(index)"
                  size="small"
                  class="select-btn"
                >
                  选择图片
                </el-button>
              </div>
            </div>
            
            <!-- 第二行：标题输入框 -->
            <div class="title-row">
              <el-input
                v-model="image.title"
                placeholder="请输入图片标题(可选)"
                size="small"
                class="title-input"
                @input="handleTitleChange(index, $event)"
              />
            </div>
          </div>
          
          <el-button
            v-if="data.displayMode !== 'single' || !data.images || data.images.length === 0"
            type="primary"
            icon="Plus"
            @click="addImage"
            class="add-image-btn"
          >
            添加图片
          </el-button>
        </div>
      </el-form-item>

      <el-divider>样式设置</el-divider>

      <el-form-item label="圆角大小">
        <el-slider
          v-model="data.borderRadius"
          :min="0"
          :max="20"
          show-input
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="填充方式">
        <el-radio-group v-model="data.objectFit">
          <el-radio label="cover">覆盖</el-radio>
          <el-radio label="contain">包含</el-radio>
          <el-radio label="fill">填充</el-radio>
          <el-radio label="none">原始大小</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider
          v-model="styles.marginTop"
          :min="0"
          :max="50"
          show-input
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider
          v-model="styles.marginBottom"
          :min="0"
          :max="50"
          show-input
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider
          v-model="styles.marginLeft"
          :min="0"
          :max="50"
          show-input
          input-size="small"
        />
      </el-form-item>
    </el-form>

    <ImagePicker ref="imagePickerRef" @select="handleImageSelect" />
  </div>
</template>

<script setup>
import { Delete, Plus, Picture } from '@element-plus/icons-vue'
import ImagePicker from '@/components/ImagePicker/index.vue'
import { ref } from 'vue'

const defaultImage = ref('https://picsum.photos/60/50')

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      displayMode: 'swiper',
      images: []
    })
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:data', 'update:styles'])
const imagePickerRef = ref(null)
const currentImageIndex = ref(-1)

// 处理标题修改（新增方法，遵循单向数据流）
function handleTitleChange(index, value) {
  const newImages = [...props.data.images]
  newImages[index].title = value
  emit('update:data', { ...props.data, images: newImages })
}

function addImage() {
  if (!props.data.images) {
    props.data.images = []
  }
  props.data.images.push({
    url: defaultImage.value,
    title: ''
  })
  emit('update:data', { ...props.data })
}

function removeImage(index) {
  if (index >= 0 && index < props.data.images.length) {
    props.data.images.splice(index, 1)
    emit('update:data', { ...props.data })
  }
}

function openImagePicker(index) {
  currentImageIndex.value = index
  imagePickerRef.value.open()
}

function handleImageSelect(image) {
  if (currentImageIndex.value >= 0 && currentImageIndex.value < props.data.images.length) {
    let imageUrl = image.url
    if (imageUrl && !imageUrl.startsWith('http')) {
      if (imageUrl.startsWith('/profile')) {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      } else {
        imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
      }
    }

    props.data.images[currentImageIndex.value].url = imageUrl
    emit('update:data', { ...props.data })
  }
}
</script>

<style lang="scss" scoped>
.image-banner-panel {
  padding: 10px;

  .unit {
    margin-left: 5px;
    color: #909399;
    font-size: 12px;
  }

  .image-management {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .image-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .image-item {
      padding: 12px;
      background-color: #f5f7fa;
      border-radius: 6px;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      gap: 8px;  /* 两行之间的间距 */

      &:hover {
        background-color: #eef1f5;
      }
    }

    /* 第一行：预览图和按钮 */
    .image-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .image-preview {
      width: 60px;
      height: 50px;
      border-radius: 4px;      
      margin-right: 0;  /* 移除原有右边距，使用gap控制间距 */
      border: 1px solid #e4e7ed;
      flex-shrink: 0;
      position: relative;
      z-index: 1;

      .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        &:not([src$="https://picsum.photos/60/50"]) {
          filter: none;
        }
      }

      .delete-btn-top-right {
        position: absolute;
        top: -8px;
        right: -8px;
        z-index: 10;
        color: #fff;
        background-color: #ff4d4f;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: #ff7875;
        }
      }
    }

    .image-operations {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;

      .select-btn {
        min-width: 100px;
      }
    }

    /* 第二行：标题输入框 */
    .title-row {
      padding-left: 0px;  /* 与预览图宽度(60px)+间距(16px)对齐 */
    }

    .title-input {
      width: 100%;
      max-width: 600px;  /* 限制最大宽度 */
    }

    .add-image-btn {
      width: 100%;
      padding: 8px 0;
      background-color: #f0f9eb;
      color: #52c41a;
      border-color: #b7eb8f;

      &:hover {
        background-color: #e6f7e0;
        border-color: #95de64;
      }
    }
  }
}
</style>